<title>客服工作台</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href=""></a>
        <a><cite>客服工作台</cite></a>
    </div>
</div>


<link href="__style__/admin/new.css?v=1" type="text/css" rel="stylesheet"/>
<link href="__style__/admin/ymwl_common.css?v=1" type="text/css" rel="stylesheet"/>

<script src="__libs__/jquery/jquery.min.js" type="text/javascript"></script>
<script src="__libs__/jquery/jquery.cookie.js" type="text/javascript"></script>

<script type="application/javascript">

    WEB_FILE_URL = '/file';
    WEB_SERVER_URL = '/im/admin.Worker/';
    WEB_STATIC_URL = '{$static}';
    IS_DEBUG = {:env('APP_DEBUG')};
    var chat_data = Array();
    var record;
    var choose_lock = false;
    var myTitle = document.title;
    var login_token = "{$user.token.token}";
    var login_user_id = "{$user.id}";
    var login_user_avatar = "{$user.avatar_url}";
    var t;
    var history_chat_content_id = 0;
    var more_page = true;
    var ws_domain = "ws://{$host}:{:config('gateway_worker.port')}";
    var now_chat_content_id = 0;
    var visitor_id = '';
    var to_user_id = '';
    var to_chat_id;
    var my_chat_id;
    var from_url = '';
    var last_showtime = '';
    var hintState = 'off';
    var isActive;
    var chat_get_time = '';
    var offline_get_time = 3;
    var socket_try_connect_time = 3;
    var socket_try_connect_range = 10;
    var socket_is_connect = false;
    var socketTime = null;

</script>
<script src="__script__/functions.js?v={:time()}" type="text/javascript"></script>
<script src="__script__/connect.js?v={:time()}" type="text/javascript"></script>
<script src="__script__/admin/worker.js?v={:time()}" type="text/javascript"></script>
<script src="__script__/admin/server.js?v={:time()}" type="text/javascript"></script>


<div id="container" style="overflow: hidden">
    <img src="/" id="se_avatar" style="display: none">
    <span id="channel" style="display: none;"></span>
    <span id="service" style="display: none;"></span>
    <div class="all_content" style="overflow-y: hidden;">
        <section class="" style="width:18%;height:100%;position:absolute;left:0px; border-right: 1px solid whitesmoke;">
             <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
                 style="margin:0px;position: absolute;top:0px;width: 100%;height: 100%;">
                <ul class="layui-tab-title" style="height: 50px;border: 0;">
                    <li class="layui-this" style="width: 50%; color: #555555; height: 50px;line-height: 55px; padding: 0;margin: 0;">当前对话<span class="line"></span></li>
                    <li style="    width: 50%;color: #555555;height: 50px;line-height: 55px; padding: 0;margin: 0;">排队列表<div id="waitnum" class="notice-icon hide"style="position: absolute;top:0px;line-height: 18px;font-size: 8px;"></div>
                        <span class="line"></span></li>
                </ul>
                <div class="layui-tab-content" style="padding: 0px;height: auto">
                    <div class="layui-tab-item  layui-show" id="chat_list" style="width: 100%;overflow-y: auto;">
                    </div>
                    <div class="layui-tab-item" id="wait_list" style="width: 100%;overflow-y: auto;">
                    </div>
                </div>
            </div>
        </section>
        <section style="padding:8px;width:61%;height:100%;position: absolute;left: 18%;background: #F7F7F7;min-width: 600px;"
                class="min-box cc">
            <div class="no_chats" style="">
                <i class="no_chats-pic"></i>
            </div>
            <form class="chatbox hide cc layui-form" style="width: 100%;height: 100%;">
                <div id="wrap" class="cc" style="width: 100%;height:100%;overflow-y: auto;background-color: #fff">
                    <div class="chatbox-name cc">
                        <div class="chatbox-info cc">
                            <div class="visitor_nickname" style="">
                                <span class="name"></span>
                                <span id="visitor_icon" class="layui-badge-dot layui-bg-green" style="display:inline-block;width: 8px;height: 8px;border-radius: 8px;margin-left: 5px;"></span>
                                <span id="visitor_status" style="display:inline-block;border-radius: 8px;margin-left: 5px;font-size: 12px"></span>
                            </div>
                            <div class="group-list">
                                <div class="group-list-left" id="user-tags">

                                </div>
                                <div class="group-list-left"><img src="__STATIC__/im/style1/img/add.png" alt="" onclick="editUserGroup()" class="editusergroup" data-vid="2"></div>
                                <div class="group-list-right">
                                    <div class="layui-input-block" id="is_top">

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <ul class="conversation">
                    </ul>
                </div>
                <div class="footer">
                    <div class="tool_box">

                        <div class="wl_faces_content">

                            <div class="wl_faces_main">

                            </div>
                        </div>
                    </div>

                    <div class="msg-input">
                        <div class="input-box">
                            <textarea id="text_in" class="edit-ipt"
                                      style="overflow-y: auto; font-weight: normal; font-size: 14px; overflow-x: hidden; word-break: break-all; font-style: normal; outline: none;padding: 10px 5px;border:none;"
                                      contenteditable="true" hidefocus="true" tabindex="0"
                                      placeholder="请输入..."></textarea>
                        </div>

                        <div class="msg-toolbar" style="background: #fff;border: none;">
                            <a id="face_icon" onclick="faceon()"><img src="__image__/admin/b/smile.png" alt="表情"
                                                                      title="表情"></a>
                            <a>
                                    <div class="am-form-group am-form-file upload_image" >
                                        <img src="__image__/admin/b/photo.png" alt="">
                                    </div>
                            </a>
                            <a>
                                <div class="am-form-group am-form-file upload_attachment" >
                                    <img src="__image__/admin/b/file.png" alt="">
                                </div>
                            </a>
                            <!--              <a onclick="getvideo()"><img src="__image__/admin/b/blacklist.png" alt=""></a>-->

                            <!--              <a onclick="getaudio()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;">&#xe688;</i></a>-->

                            <a href="javascript:setblack()"><img src="__image__/admin/b/blacklist.png" alt="移入黑名单"
                                                                 title="移入黑名单"></a>
                            <a onclick="getswitch()"><img src="__image__/admin/b/transfer.png" alt="客服转接" title="客服转接"></a>
                            <a onclick="getHistory()"><img src="__image__/admin/b/record.png" alt="历史记录"
                                                           title="历史记录"></a>
                            <a onclick="closeChat()"><img src="__image__/admin/b/over.png" alt="结束服务" style="height: 20px;"
                                                           title="结束服务"></a>

                            <a onmouseover="info()" id="paste" style="position:absolute; right:134px;bottom:5px;width: 120px;font-size: 12px;"><img src="__image__/admin/b/screen.png" alt=""> 怎样发截图？</a>
                        </div>
                        <div class="msg-toolbar-footer grey12">
                            <a onclick="send()" class="layui-btn msg-send-btn">
                                发送
                            </a>
                            <a id="showinfo" class="showinfo">
                                <div style="height: 24px;border-left: 1px solid #FFF;margin-top: 8px;padding: 7px 15px">
                                    <img src="__image__/admin/b/up-menu.png" alt="">
                                </div>
                                <!-- <i class='triangle'  style="margin-top: 21px;"></i> -->
                            </a>
                        </div>
                    </div>

                </div>
            </form>

            <!-- 浮层 -->
            <div id='fuceng' class="hide"
                 style="background: #f7f7f7;height: 68px;position: absolute;bottom: 50px;right: 20px;z-index: 9999;border-radius: 8px;padding: 8px 0">
                <ul style="width: 100%;height: 60px;">
                    <li class="fuceng-li" onclick="choosetype(this)" name='1'><img id='type1'
                                                                                   class="layui-icon selecte-icon"
                                                                                   src="__image__/admin/b/selected.png"
                                                                                   alt=""><span>按Enter键发送消息，Ctrl+Enter换行</span>
                    </li>
                    <li class="fuceng-li selected-li" onclick="choosetype(this)" name='2'><img id='type2'
                                                                                               class="layui-icon selecte-icon"
                                                                                               src="__image__/admin/b/selected.png"
                                                                                               alt=""><span>按Ctrl+Enter键发送消息，Enter换行</span>
                    </li>
                </ul>
            </div>
        </section>
        <section class="chatinfo">

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
                 style="margin: 0px;height: 100%;background-color: #fff;position: relative;">
                <ul class="layui-tab-title" style="height: 50px;border-bottom: 0;background-color: #f7f7f7">
                    <li class="layui-this" style="width: 25%;height: 50px;line-height: 50px;color: #555555;    padding: 0;
    margin: 0;">访客信息<span
                            class="line"></span></li>
                    <li style="padding:0;width: 25%;height: 50px;line-height: 50px;color: #555555;    padding: 0;
    margin: 0;">黑名单<span
                            class="line"></span></li>
                    <li style="padding:0;width: 25%;height: 50px;line-height: 50px;color: #555555;    padding: 0;
    margin: 0;">快捷回复<span class="line"></span></li>
                    <li id="kf_info" style="padding:0;width: 25%;height: 50px;line-height: 50px;color: #555555;    padding: 0;
    margin: 0;">
<!--                        <i class="layui-icon layui-icon-chat"  style="font-size: 20px; color: #1E9FFF;"></i>状态-->
                        <i class="layui-icon layui-icon-loading"  style="font-size: 20px; color: #1E9FFF;"></i>状态
                    </li>
                </ul>

                <div class="layui-tab-content" style="padding: 16px;height: auto">
                    <div class="layui-tab-item layui-show">
                        <div class="" style="color: #555555;">

                            <div style="font-size: 14px;border-left: 5px solid #1E9FFF;height: 40px;line-height: 40px;background: #f2f2f2;    padding-left: 10px;">
                                访问信息
                            </div>

                            <div style="margin-top: 12px;">
                                来源：<span class="record"></span>
                            </div>
                            <div style="margin-top: 14px; font-size: 12px;">
                                地区：<span class="ipdizhi"></span> 【<span class="iparea"></span>】
                            </div>

                            <div style="margin-top: 14px;">
                                状态：<span id="v_state" style="font-size: 10px;"></span>
                            </div>

                            <div style="margin-top: 14px;">
                                上次登录时间：<span
                                    id="last_login_time" style="font-size: 10px;"></span>
                            </div>

                            <div style="margin-top: 14px;">
                                登录次数：<span
                                    id="login_times" style="font-size: 10px;"></span>
                            </div>
                            <div style="margin-top: 14px;">
                                登录设备：<span
                                    id="login_device" style="font-size: 10px;"></span>
                            </div>

                            <div style="font-size: 14px;border-left: 5px solid #1E9FFF;height: 40px;line-height: 40px;background: #f2f2f2;    padding-left: 10px;margin-top: 14px;">
                                备注信息
                            </div>

                            <div style="margin-top: 14px;">
                                姓名：<input type="text" id="auth_name" placeholder="姓名填写后自动保存" class="layui-input"
                                          onblur="saveinfo()"/>
                            </div>

                            <div style="margin-top: 14px;">
                                电话：<input type="text" id="mobile" placeholder="电话填写后自动保存" class="layui-input"
                                          onblur="saveinfo()"/>
                            </div>
                            <div style="margin-top: 14px;">
                                备注：<textarea id="introduction" placeholder="备注信息，填写后自动保存" class="layui-input"
                                             onblur="saveinfo()" style="height: 50px;"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item" id='black_list' style="width: 100%;overflow-y: auto;padding: 0px;">
                    </div>
                    <div class="layui-tab-item" id='word_list' style="width: 100%;height: 100%; overflow-y: auto;">
                        <div id='quit_reply'>
                        </div>
                    </div>

                    <div class="layui-tab-item" id='kf_info_list' style="width: 100%;height: 100%; overflow-y: auto;">
                        <div class="" style="color: #555555;">

                            <div style="font-size: 14px;border-left: 5px solid #1E9FFF;height: 40px;line-height: 40px;background: #f2f2f2;    padding-left: 10px;">
                                客服信息
                            </div>

<!--                            <div style="margin-top: 12px;">-->
<!--                                上线时间：<span id="login_time"></span>-->
<!--                            </div>-->
<!--                            <div style="margin-top: 14px;">-->
<!--                                在线时长：<span id="online_time"></span>-->
<!--                            </div>-->

                            <div style="margin-top: 14px;">
                                在线状态：<span id="online_state" ></span>
                            </div>

                            <div style="margin-top: 14px;">
                                剩余重连：<span id="login_again_times" ></span>
                            </div>

                            <div style="font-size: 14px;border-left: 5px solid #1E9FFF;height: 40px;line-height: 40px;background: #f2f2f2;    padding-left: 10px;margin-top: 14px;">
                                客服设置
                            </div>

                            <div style="margin-top: 14px;">
                                <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">下班停服：</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="switch" lay-skin="switch">
                                    </div>
                                </div>
                                </form>


                            </div>



                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>

</div>
<form id="myAwesomeForm" method="post" style="display: none">
    <!-- Submit提交按钮 -->
    <input type="submit" id="submitButton" name="submitButton" />
</form>

<script>
    layui.use(['element','upload','form'], function () {
        var $ = layui.$
            , device = layui.device();
        var form = layui.form;
        form.render();
        console.log(device);
        //监听提交
        // form.on('submit(formDemo)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });
        // layerWarning(123);
        //执行实例

        var height = document.documentElement.clientHeight;
        $("#chat_list").css("height", (height - 110) + "px");
        // $("#chat_list").css("height", 'auto');
        $("#black_list").css("height", (height - 110) + "px");
        $("#word_list").css("height", (height - 110) + "px");
        $("#wait_list").css("height", (height - 110) + "px");
        $(".min-box").css("height", (height - 110) + "px");
        $("#wrap").css("height", (height - 110 - 145) + "px");
        let url = document.location.toString();


        //初始化 监听
        var init = function () {
            getListing();
            chatOn();
            getReply();
            socket_connect();
            getBlacklist()
            $.cookie("time", "");
            $(".conversation").empty();
        };
        window.onload = init();

    });



</script>
